/*
 * @Author: xiaosihan
 * @Date: 2021-06-06 13:19:36
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-06-06 15:19:31
 */

import React from "react";
import { AxesHelper, Camera, Group3D, OrbitControls, Renderer, SkyBox } from "xsh-react-three";
import { Route, Switch as RouteSwitch } from 'react-router-dom';
import { XRTUI_ROUTER } from "./type";
import Button3DDemo from "./components/Button3DDemo/Button3DDemo";
import XRTNav from "./components/XRTNav/XRTNav";


interface Props { }

interface State { }

export default class XshReactThreeUiDemo extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    render() {
        return (
            <>
                <XRTNav />

                <Renderer ref={ins => {
                    Object.assign(window, {
                        renderer: ins
                    })
                }}>

                    <Group3D>
                        <RouteSwitch>
                            <Route exact path={[XRTUI_ROUTER.ROOT, XRTUI_ROUTER.BUTTON_3D]} component={Button3DDemo} />
                        </RouteSwitch>
                    </Group3D>


                    <OrbitControls
                        initTime={0}
                        position={{ x: 10, y: 10, z: 10 }}
                        center={{ x: 0, y: 0, z: 0 }}
                        enableDamping={true}
                    >
                        <Camera />

                    </OrbitControls>

                    <SkyBox />

                    <AxesHelper />

                </Renderer>
            </>
        );
    }
}